<template>
  <div class="statusContainer">
    <el-tabs type="card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="阀组件" class="valveComponents" name="valveComponents">
        <div class="left">
          <el-tree :data="treeData" @node-click="nodeClick" node-key="label" current-node-key="A相D阀"></el-tree>
        </div>
        <div class="right">
          <div class="card" v-for="(item, index) in cardItems" :key="index">
            <div class="cardTitle">{{ item.label }}</div>
            <div class="cardTable">
              <el-table :data="item.table" border>
                <el-table-column prop="factor" align="center" label="因子"></el-table-column>
                <el-table-column prop="rate" align="center" label="评分" width="100"></el-table-column>
                <el-table-column prop="proportion" align="center" label="占比" width="100"></el-table-column>
              </el-table>
            </div>
            <div class="cardChart" :id="nameTableChart(index)"></div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="阀塔" class="valveTower" name="valveTower">
        <div class="towerContainer">
          <div class="card" v-for="(item, index) in cardTowelItems" :key="index">
            <div class="cardTitle">{{ item.label }}</div>
            <div class="cardTable">
              <el-table :data="item.table" border>
                <el-table-column prop="factor" align="center" label="因子"></el-table-column>
                <el-table-column prop="rate" align="center" label="评分" width="100"></el-table-column>
                <el-table-column prop="proportion" align="center" label="占比" width="100"></el-table-column>
              </el-table>
            </div>
            <div class="cardChart" :id="nameTowelChart(index)"></div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="阀避雷器" class="valveArrester" name="valveArrester">
<!--        <div id="arresterChart"></div>-->
        <div class="dataItem" v-for="(item, index) in timesData" :key="index">
          <span>{{ index }}</span>
          <input :placeholder="item"/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getValveArrester, getValveTower, getValveComponents } from '@/api/stateAssessment'
export default {
  data() {
    return {
      id: 1,
      activeName: 'valveComponents',
      treeData: [
        { label: 'A相D阀' },
        { label: 'B相D阀' },
        { label: 'C相D阀' },
        { label: 'A相Y阀' },
        { label: 'B相Y阀' },
        { label: 'C相Y阀' }
      ],
      cardItems: [],
      cardTowelItems: [],
      timesData: {},
      chartOption: {
        color: 'rgba(0, 0, 0, 0)',
        radar: {
          // shape: 'circle',
          radius: '70',
          center: ['50%', '55%'],
          indicator: [
            { name: '1', max: 100, color: '#0Ac4F7' },
            { name: '2', max: 100, color: '#0Ac4F7' },
            { name: '3', max: 100, color: '#0Ac4F7' },
            { name: '4', max: 100, color: '#0Ac4F7' },
            { name: '5', max: 100, color: '#0Ac4F7' }
          ],
          axisLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#0Ac4F7'
            }
          }
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              }
            ],
            areaStyle: {
              color: 'rgba(10, 169, 247, 0.7)'
            },
            symbol: 'none'
          }
        ]
      },
      arresterChartOption: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getData()
      this.initChart()
    })
  },
  methods: {
    getData() {
      console.log('获取数据', this.id)
      getValveComponents(this.id, 'VAD').then(response => {
        console.log('getValveComponents', response)
        this.cardItems = response.data
        console.log('成功加载数据')
      })
      getValveTower(this.id).then(response => {
        this.cardTowelItems = response.data
      })
      getValveArrester(this.id).then(response => {
        this.timesData = response.data
      })
    },
    nameTableChart(index) {
      return 'radar' + index
    },
    nameTowelChart(index) {
      return 'towelRadar' + index
    },
    async initChart() {
      const response = await getValveComponents(this.id, 'VAD')
      console.log('刷新', this.cardItems, response)
      for (let i = 0; i < this.cardItems.length; i++) {
        const myChart = echarts.init(document.getElementById('radar' + i))
        this.chartOption.series[0].data[0].value = this.cardItems[i].chartData
        myChart.setOption(this.chartOption)
      }
    },
    tabClick(e) {
      this.$nextTick(() => {
        if (e.name === 'valveComponents') {
          console.log('阀组件')
          for (let i = 0; i < this.cardItems.length; i++) {
            const myChart1 = echarts.init(document.getElementById('radar' + i))
            myChart1.clear()
            this.chartOption.series[0].data[0].value = this.cardItems[i].chartData
            myChart1.setOption(this.chartOption, true)
          }
        } else if (e.name === 'valveTower') {
          console.log('阀塔')
          for (let i = 0; i < this.cardTowelItems.length; i++) {
            const myChart = echarts.init(document.getElementById('towelRadar' + i))
            myChart.clear()
            this.chartOption.series[0].data[0].value = this.cardTowelItems[i].chartData
            myChart.setOption(this.chartOption, true)
          }
        } else {
          console.log('阀避雷针')
          const myChart2 = echarts.init(document.getElementById('arresterChart'))
          myChart2.clear()
          myChart2.setOption(this.arresterChartOption, true)
        }
      })
    },
    nodeClick(data) {
      console.log('阀点击', data.label)
      switch (data.label) {
        case 'A相D阀':
          getValveComponents(this.id, 'VAD').then(response => {
            console.log('getValveComponents', response)
            this.cardItems = response.data
            console.log('成功加载数据')
          })
          break
        case 'B相D阀':
          getValveComponents(this.id, 'VBD').then(response => {
            console.log('getValveComponents', response)
            this.cardItems = response.data
            console.log('成功加载数据')
          })
          break
        case 'C相D阀':
          getValveComponents(this.id, 'VCD').then(response => {
            console.log('getValveComponents', response)
            this.cardItems = response.data
            console.log('成功加载数据')
          })
          break
        case 'A相Y阀':
          getValveComponents(this.id, 'VAY').then(response => {
            console.log('getValveComponents', response)
            this.cardItems = response.data
            console.log('成功加载数据')
          })
          break
        case 'B相Y阀':
          getValveComponents(this.id, 'VBY').then(response => {
            console.log('getValveComponents', response)
            this.cardItems = response.data
            console.log('成功加载数据')
          })
          break
        case 'C相Y阀':
          getValveComponents(this.id, 'VCY').then(response => {
            console.log('getValveComponents', response)
            this.cardItems = response.data
            console.log('成功加载数据')
          })
          break
      }
      for (let i = 0; i < this.cardItems.length; i++) {
        const myChart = echarts.init(document.getElementById('radar' + i))
        this.chartOption.series[0].data[0].value = this.cardItems[i].chartData
        myChart.setOption(this.chartOption)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .statusContainer {
    height: 100%;
    width: 100%;
    color: white;
    ::v-deep .el-tabs {
      height: 100%;
      padding: 10px 30px;
      position: relative;
      .el-tabs__header {
        padding-left: 30px;
        border-color: #0a76a4;
        &::before {
          position: absolute;
          left: 0px;
          bottom: -2px;
          height: 3px;
          width: 30px;
          background-color: #0Ac4F7;
          content: '';
        }
        .el-tabs__nav-wrap {
          &::after {
            background-color: red !important;
          }
          .el-tabs__nav {
            border: none;
            .el-tabs__item {
              border: none;
              margin-left: 8px;
              background-color: #0D3E66;
              color: #0Ac4F7;
              &.is-active {
                background-color: #0Ac4F7;
                color: #e1e1e1;
                font-weight: bold;
              }
            }
          }
        }
      }
      .el-tabs__content {
        height: calc(100% - 56px);
        .el-tab-pane {
          height: 100%;
          overflow: scroll;
        }
        .valveComponents {
          .left {
            float: left;
            position: fixed;
            width: 6%;
            height: 100%;
            background-color: #082841;
            .el-tree {
              background: #082841;
              color: #0Ac4F7;
              .el-tree-node {
                &.is-current > .el-tree-node__content {
                  background-color: #0A4D7A;
                }
                .el-tree-node__content {
                  padding: 20px 0;
                  &:hover {
                    background-color: #0A4D7A;
                  }
                }
              }
            }
          }
          .right {
            float: right;
            width: 94%;
            color: #0Ac4F7;
            .card {
              width: calc(50% - 30px);
              height: 200px;
              float: left;
              display: flex;
              margin: 0 0 30px 30px;
              padding: 10px;
              background-color: #061F33;
              &:last-child {
                margin: 0 0 0 30px;
              }
              .cardTitle {
                flex: 1;
              }
              .cardTable {
                flex: 5;
                .el-table{
                  border: none;
                  &::before {
                    height: 0;
                  }
                  //th.gutter {
                  //  display: none;
                  //  width: 0;
                  //}
                  //colgroup col[name='gutter'] {
                  //  display: none;
                  //  width: 0;
                  //}
                  .el-table__body-wrapper {
                    background-color: #061F33;
                  }
                  tr{
                    background-color: #061F33;
                    &:last-child {
                      background-color: #07452E;
                    }
                  }
                  tr:hover > td {
                    background-color: #0Ac4F7;
                  }
                  th {
                    padding: 0;
                    color: #0Ac4F7;
                    background-color: #072D44;
                    border: 0px;
                  }
                  td {
                    padding: 0;
                    color: #EBEEF5;
                    border: 1px solid #072D44;
                  }
                }
                .el-table--border {
                  &::after {
                    background-color: #072D44;
                  }
                  &::before {
                    width: 0px;
                  }
                }
              }
              .cardChart {
                flex: 2
              }
            }
          }
        }
        .valveTower {
          .towerContainer {
            .card {
              width: calc(50% - 30px);
              height: 200px;
              float: left;
              display: flex;
              margin: 0 0 30px 30px;
              padding: 10px;
              background-color: #061F33;
              color: #0Ac4F7;
              &:last-child {
                margin: 0 0 0 30px;
              }
              .cardTitle {
                flex: 1;
              }
              .cardTable {
                flex: 5;
                .el-table{
                  border: none;
                  &::before {
                    height: 0;
                  }
                  .el-table__body-wrapper {
                    background-color: #061F33;
                  }
                  tr{
                    background-color: #061F33;
                    &:last-child {
                      background-color: #07452E;
                    }
                  }
                  tr:hover > td {
                    background-color: #0Ac4F7;
                  }
                  th {
                    padding: 0;
                    color: #0Ac4F7;
                    background-color: #072D44;
                    border: 0;
                  }
                  td {
                    padding: 0;
                    color: #EBEEF5;
                    border: 1px solid #072D44;
                  }
                }
                .el-table--border {
                  &::after {
                    background-color: #072D44;
                  }
                  &::before {
                    width: 0px;
                  }
                }
              }
              .cardChart {
                flex: 2
              }
            }
          }
        }
        .valveArrester {
          //#arresterChart {
          //  height: 100%;
          //  width: 100%;
          //}
          padding: 100px 100px;
          background-color: #061F33;
          .dataItem {
            width: calc(50% - 50px);
            margin:0 50px 50px 0;
            float: left;
            color: #e1e1e1;
            input {
              background-color: #061F33;
              border-color: #0Ac4F7;
            }
          }
        }
      }
      ::-webkit-scrollbar {
        width: 0;
      }
    }
  }
</style>
